<template>

	<view class="">
		<!-- 导航栏 -->
		<view class="content">
			<view class="return-icon" @click="ret"></view>
			<text class="older-payment-txt">订单支付</text>
			<view class=""></view>
		</view>
		<view class="Virtual-Navigation"></view>
		<!-- 地址信息 -->
		<view class="Order-payment-background">
			<view class="Address-selection">
				<view class="address">
					<view class="Address-information">
						<view class="consignee" v-if="pay && pay.length > 0">
							<view class="default-box">{{ pay[0].defaultStatus === 1 ? '默认' : '' }}</view>
							<view class="name-box">{{ pay[0].recipientName }}</view>
							<view class="name-box">{{ maskedPhoneNumber }}</view>
						</view>
						<view class="consignee-02" v-if="pay && pay.length > 0">
							<view class="name-box-02">{{ pay[0].state }}</view>
							<view class="name-box-02">{{ pay[0].city }}</view>
							<view class="name-box-02">{{ pay[0].districtorcounty }}</view>
							<view class="name-box-03">{{ pay[0].addressLine }}</view>
						</view>
					</view>
					<view class="Jump-to"></view>
				</view>
				<view class="Dividing-line"></view>
			</view>
			<view v-for="(products, name, groupIndex) in groupedProducts" :key="name" class="Total-amount-background">
				<view class="shop">
					<view class="shop-avatar">
						<image :src="products.merchant_url" class="product-image" mode="aspectFill"></image>
					</view>
					<text class="shop-namer">{{ name }}</text>
				</view>

				<view v-for="(product, index) in products" :key="index" class="Product-information-background">
					<view class="Product-Background">
						<view class="Product-images">
							<image :src="product.image[0]" class="product-image" mode="aspectFill"></image>
						</view>
						<view class="Product-information">
							<view class="price-background">
								<text class="price-txt">¥{{ product.attributes.price }}</text>
							</view>
							<view class="price-background-02">
								<text>{{ product.productName }}</text>
							</view>
							<view class="price-background-02">
								<text>{{ product.productName }}</text>
							</view>
							<view class="price-background-03">
								<text></text>
								<text>× {{ quantities[getGlobalIndex(groupIndex, index)] }}</text>
								<!-- 使用 getGlobalIndex 方法 -->
							</view>
						</view>
					</view>
				</view>

				<view class="Product-amount">
					<text>商品金额</text>
					<text class="Product-amount-maney">¥ {{ totalProductAmount(products) }}</text>
				</view>
				<view class="Delivery-information">
					<text class="Delivery-information-txt">配送信息</text>
					<text class="Delivery-information-txt">48小时内发货</text>
				</view>
				<view class="Product-amount">
					<text>运费</text>
					<text class="Product-amount-maney">¥ {{ freight }}</text>
				</view>
				<view class="Order-remarks">
					<text class="">订单备注</text>
					<input class="remarks"  v-model="remarks" placeholder="请输入备注" type="text" />
				</view>
			</view>

			<view class="Payment-amount">
				<view class="Product-amount" v-if="pay && pay.length > 0">
					<text>优惠券</text>
					<view class="coupon" @click="handleClick">
						<text>- ¥ {{ selectedCoupon.discount }}</text>
						<view class="coupon-box"></view>
					</view>
				</view>
				<!-- 优惠券弹出框 -->
				<u-popup :show="show" @close="close" @open="open">
					<view class="Coupon-display">
						<!-- 优惠券弹出框导航栏-->
						<view class="Coupon-display-box">
							<view class="">

							</view>
							<view class="">
								<u-tabs :list="list1" lineColor="#ff2442" @click="clickTab"></u-tabs>
							</view>
							<view class="">
								<view class="close-box" @click="close"></view>
							</view>

						</view>
						<!-- 内容区域 -->
						<view v-if="currentTab === 0">
							<!-- 未使用内容 -->
							<view v-for="(coupon, index) in Coupons" :key="coupon.couponId" class="Coupon-amount"
								@click="chosecoupons(coupon)">
								<view class="Diary-Coupons--txt-background">
									<text class="Diary-Coupons-txt">牛牛日记优惠券</text>
									<text class="not-used">未使用</text>
								</view>

								<view class="Diary-Coupons-background">
									<view class="Diary-Coupons-maney">
										<text class="Diary-Coupons-maney-txt">¥ {{ coupon.discount }}</text>
									</view>
									<view class="Available-coupons">
										<text class="Available-coupons-txt">{{ coupon.description }}</text>
										<view class="Available-coupons-02">
											<view class=""></view>
											<text class="Available-coupons-txt-02">满{{ coupon.spend }}元可用</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="currentTab === 1">
							<!-- 已使用内容 -->
							<view v-for="(coupon, index) in UserCoupons" :key="coupon.couponId" class="Coupon-amount">
								<view class="Diary-Coupons--txt-background">
									<text class="Diary-Coupons-txt">牛牛日记优惠券</text>
									<text class="already-use">已使用</text>
								</view>
								<view class="Diary-Coupons-background">
									<view class="Diary-Coupons-maney">
										<text class="Diary-Coupons-maney-txt-maney">¥ {{ coupon.discount }}</text>
									</view>
									<view class="Available-coupons">
										<text class="Available-coupons-txt">{{ coupon.description }}</text>
										<view class="Available-coupons-02">
											<view class=""></view>
											<text class="Available-coupons-txt-02">使用时间:{{ coupon.createdat }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-popup>
				<view class="Product-amount" v-if="pay && pay.length > 0">
					<text></text>
					<text>总计 : {{ totalAmount }} </text>
				</view>
			</view>
			<view class="Balance-payment">
				<text>余额支付</text>
				<view class="Radio">
					<u-radio-group v-model="selectedRadio" placement="column">
						<u-radio v-for="(item, index) in radiolist1" :key="index" :name="item.name" activeColor="red"
							size="50rpx" iconSize="30rpx" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>

			</view>
			<!-- 订单备注 -->
			<view class="Virtual-remarks"></view>
		</view>
		<!-- 总计 -->
		<view class="total">
			<view class="total-amount" v-if="pay && pay.length > 0">
				<text>总计</text>
				<text class="total-maney">¥{{ totalAmount }}</text>
				<text class="total-maney">已减 ¥{{ selectedCoupon.discount }}</text>
			</view>
			<view class="Pay-Now" @click="fetchPays">立即支付</view>
			<!-- 是否确认支付 -->
			<u-popup :show="showPopup" mode="center" round="30rpx" @close="close" @open="open">
				<view class="determine-pay">
					<view class="determine-pay-background">
						<text>是否确认付款?</text>
					</view>
					<view class="Whether-pay">
						<view class="cancel" @click="showCancel">取消</view>
						<!-- 点击取消出现的弹框 -->
						<u-popup :show="showCancelPopup" @close="close" @open="open">
							<view class="cancelPopup-background">
								<view class="timing">
									<view class="Payment-countdown">
										<u-count-down :time="30 * 60 * 1000" format="mm:ss:SSS" autoStart millisecond
											class="countdown-timer" @change="onChange">
											<view class="time">
												<text class="time-custom-txt">请在</text>
												<text class="time-custom-item">{{ timeData.minutes }}</text>
												<text class="time-doc">:</text>
												<text class="time-custom-item">{{ timeData.seconds }}</text>
												<text class="time-custom-txt">内支付</text>
											</view>
										</u-count-down>
									</view>
									<view class="return-timing">

									</view>
								</view>
								<view class="Address-selection02">
									<!-- <view class="address"> -->
									<view class="Address-information">
										<view class="consignee" v-if="pay && pay.length > 0">
											<view class="name-box">{{ pay[0].recipientName }}</view>
											<view class="name-box">{{ maskedPhoneNumber }}</view>
										</view>
										<view class="consignee-02" v-if="pay && pay.length > 0">
											<view class="name-box-02">{{ pay[0].state }}</view>
											<view class="name-box-02">{{ pay[0].city }}</view>
											<view class="name-box-02">{{ pay[0].districtorcounty }}</view>
											<view class="name-box-03">{{ pay[0].addressLine }}</view>
										</view>
									</view>
									<view class="Dividing-line02"></view>
								</view>
								<view class="Balance-payment">
									<text>余额支付</text>
									<view class="Radio">
										<u-radio-group v-model="selectedRadio" placement="column">
											<u-radio v-for="(item, index) in radiolist1" :key="index" :name="item.name"
												activeColor="red" size="50rpx" iconSize="30rpx" @change="radioChange">
											</u-radio>
										</u-radio-group>
									</view>

								</view>
								<view class="Continue-settlement">
									<view class="Continue-settlement-txt" v-if="pay && pay.length > 0">
										<text @click="fetchPays">继续结算</text>
										<view class="Continue-settlement-txt02">¥
											<!-- {{ (pay[0].attributes.price + freight - selectedCoupon.discount ).toFixed(2) }} -->
										</view>
									</view>
								</view>
							</view>
						</u-popup>
						<view class="confirm" @click="confirm">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				quantities: [], // 假设这是你已有的数组
				globalIndex: 0, // 用于全局追踪quantities索引的变量
				 remarks: '', // 存储用户输入的备注内容
				// 存储用户选择的单选框值
				selectedRadio: '',
				selectedCoupon: {
					discount: 0,
				}, // 用于保存选中的优惠券信息
				show: false,
				timeData: {},
				productId: "",
				// 当前选中的Tab索引
				currentTab: 0,
				showPopup: false, // 控制弹出框的显示状态
				// 控制支付失败倒计时弹框
				showCancelPopup: false,
				UserCoupons: [],
				// products:[
				// 	{quantity:0},
				// ],

				// 优惠券信息
				Coupons: [],
                orderList:[],
				pay: {
					defaultStatus: ""
				},
				products: [], // 假设这是您的产品列表
				// quantities: [] ,// 初始化为空数组
				freight: 10,
				radiolist1: [{
					name: "123",
					disabled: false
				}, ],
				list1: [{
					name: '未使用',
				}, {
					name: '已使用',
				}]

			}
		},
		onLoad(e) {
			this.orderList=[];
			this.productId = e.productId;
			this.address();
			this.Usedcoupons();
			console.log(this.pay);

			const quantities = uni.getStorageSync('quantities');
			console.log(quantities); // 这将是一个数组
			if (quantities) {
				this.quantities = quantities;
				console.log("456:", this.quantities); // 这将是一个数组
			}
		},

		methods: {
			// 确认支付	
			confirm(){
				const payedOrderDao={
					orderList:this.orderList.result,
					userId:uni.getStorageSync("id")
					
				}
				this.request("/pay/payed","put",payedOrderDao)
					.then((res) => {
						console.log(res);
						 payedOrderDao.orderList=[];
						 this.orderList=[];
						uni.navigateTo({
							url:"/pages/zhifuchenggong/zhifuchenggong"
						})
						// this.pay = res.data.result;
					}).catch((err) => {
						console.log(err);
					})
			},
			getGlobalIndex(groupIndex, productIndex) {
				// 根据groupIndex和productIndex计算全局索引
				let previousGroupsLength = 0;
				for (let i = 0; i < groupIndex; i++) {
					previousGroupsLength += this.groupedProducts[Object.keys(this.groupedProducts)[i]].length;
				}
				return previousGroupsLength + productIndex;
			},
			// 用于将一个产品列表按照产品名称进行分组
			groupByProductName(products) {
				if (!Array.isArray(products)) {
					console.error('Expected products to be an array, but got:', typeof products);
					console.log(products);
					return {}; // 返回一个空对象，防止程序崩溃
				}
				return products.reduce((groups, product) => {
					const groupName = product.name;
					if (!groups[groupName]) {
						groups[groupName] = [];
					}
					groups[groupName].push(product);
					return groups;
				}, {});
			},
			address() {
				this.request(`/pay/PayAndOrder?productId=${this.productId}&userId=${uni.getStorageSync("id")}`, "post")
					.then((res) => {
						console.log(res);
						this.pay = res.data.result;
					}).catch((err) => {
						console.log(err);
					})

			},
			radioChange() {

			},
			onChange(e) {
				this.timeData = e
			},
			close() {
				this.show = false,
					this.showPopup = false
				// console.log('close');
			},
			handleClick() {
				this.show = true;
				this.request(
						`/selectCoupon/notUsed?userId=${uni.getStorageSync("id")}&spend=${this.pay[0].attributes.price}`,
						"get")
					.then((res) => {
						console.log(res);
						// this.pay = res.data.result;
						this.Coupons = res.data.result;
					}).catch((err) => {
						console.log(err);
					})
			},
			Usedcoupons() {
				this.request(`/selectCoupon/usedCoupons?userId=${uni.getStorageSync("id")}`, "get")
					.then((res) => {
						console.log(res);
						// this.pay = res.data.result;
						this.UserCoupons = res.data.result;
					}).catch((err) => {
						console.log(err);
					})
			},
			open() {
				// console.log('open');
			},
			clickTab(index) {
				console.log('index', index);
				// 更新当前选中的Tab索引
				this.currentTab = index.index;
			},
			ret() {
				uni.navigateBack({
					delta: 1
				})
			},
			fetchPays() {
				console.log(this.products.map(product => product.id)); // 输出每个产品的 ID
				console.log(this.products.map(product => product.attributes.price)); // 输出每个产品的价格
				if (this.selectedRadio) {
					// 执行支付操作
					console.log('开始支付，支付方式为:', this.selectedRadio);
					this.showPopup = true;
					this.showCancelPopup = false;
					const carList = [];
					   Object.entries(this.groupedProducts).forEach(([name, products], groupIndex) => {
					         products.forEach((product, index) => {
								const globalIndex = this.getGlobalIndex(groupIndex, index); // 获取全局索引
								            const count = this.quantities[globalIndex] || 1; // 获取数量，如果没有默认值为 1
					            carList.push({
					                productId: Number(product.productId),
					                count: count, // 可以根据需要调整数量
					                price: product.attributes.price,
					                 merchantId: product.productId, // 使用 product 的 merchantId
					                remarks: this.remarks || "" // 如果有备注
					            });
					        });
					    });
						// 计算总价
						   const totalPrice = carList.reduce((total, item) => total + (item.price * item.count), 0);
						
						    // 构建数据对象
						    const dataArray = {
						        carList,
						        userId: Number(uni.getStorageSync("id")),
						        totalPrice,
						        couponId: this.selectedCoupon.couponId || 0 // 如果没有选择优惠券，使用默认优惠券ID
						    };
						
					
					console.log(dataArray); // 输出每个产品的价格
					const dataArrayJson = JSON.stringify(dataArray);
					this.request("/pay/createOrder", "post",dataArrayJson)
						.then((res) => { 
							console.log(res);
							// console.log(this.orderList);
							this.orderList=res.data;
							console.log("123" + this.orderList);
							// this.UserCoupons = res.data.result;
						}).catch((err) => {
							console.log(err);
						})
				} else {
					uni.showToast({
						title: "请至少选择一种支付方式进行支付!",
						icon: 'none'
					});
					console.log(this.selectedRadio);
				}
			},
			totalProductAmount(products) {
				return products.reduce((sum, product) => sum + product.attributes.price, 0).toFixed(2);
			},
			chosecoupons(coupon) {
				this.show = false,
					this.selectedCoupon = coupon; // 保存选中的优惠券

			},
			showCancel() {
				// this.showCancelPopup = true;
				uni.showToast({
					title: "您已经取消支付!",
					icon: 'none'
				});
				uni.navigateTo({
					url:"/pages/trade/orderAll",
				})
			}
		},
		computed: {
			// 计算属性，用于生成遮掩后的手机号
			maskedPhoneNumber() {
				if (Array.isArray(this.pay) && this.pay.length > 0) {
					const phone = this.pay[0]?.phoneNumber; // 使用可选链操作符防止 undefined 错误
					// 确保 phone 是一个字符串且长度足够
					if (phone && typeof phone === 'string' && phone.length >= 7) {
						// 只显示前三位和最后四位，中间部分用星号替代
						return phone.slice(0, 3) + '****' + phone.slice(-4);
					}
				}
				return ''; // 如果条件不满足，返回空字符串
			},
			totalAmount() {
				return this.pay.reduce((sum, product) => {
					return sum + (product.attributes.price + this.freight - this.selectedCoupon.discount);
				}, 0).toFixed(2);
			},
			productIdArray() {
				return this.productId.split(''); // 将 productId 按字符拆分成数组
			},
			groupedProducts() {
				return this.groupByProductName(this.pay);
			}
		},
		// 计算属性，将 productId 拆分为字符数组

	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0rpx;
		background-color: white;
		z-index: 1000;
	}

	.Virtual-Navigation {
		width: 100%;
		height: 130rpx;
	}

	.return-icon {
		width: 70rpx;
		height: 70rpx;
		background-image: url("../../static/Myimg/zuo1.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.older-payment-txt {
		font-size: 40rpx;
	}

	.Order-payment-background {
		background-color: #f0f0f0;
		padding-top: 10rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.address {
		height: 230rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Address-selection {
		margin-top: 40rpx;
		background-color: white;
	}

	.Address-selection,
	.Address-selection02 {
		width: 100%;
		height: 200rpx;
	}

	.Total-amount-background {
		width: 100%;
		background-color: white;
		margin-top: 60rpx;
	}

	.Address-information {
		width: 81%;
		height: 160rpx;
		margin-left: 30rpx;
	}

	.Jump-to {
		width: 60rpx;
		height: 60rpx;
		margin-right: 25rpx;
		background-image: url("../../static/Myimg/right.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.consignee {
		display: flex;
	}

	.consignee-02 {
		width: 550rpx;
		height: 90rpx;
		/* 使用 Flex 布局 */
		display: flex;
		/* 垂直居中对齐内容 */
		align-items: center;
		overflow: hidden;


	}

	.default-box {
		border: 1rpx solid black;
		color: black;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.name-box {
		margin-top: 20rpx;
	}

	.name-box,
	.name-box-02 {
		font-size: 30rpx;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.name-box-02 {
		display: block;
		font-size: 40rpx;
	}

	.name-box-03 {
		display: block;
		font-size: 40rpx;
		margin-left: 20rpx;
		/* 禁止文本换行 */
		white-space: nowrap;
		/* 隐藏超出的内容 */
		overflow: hidden;
		/* 超出范围的文本以省略号显示 */
		text-overflow: ellipsis;

	}

	.Dividing-line,
	.Dividing-line02 {
		width: 100%;
		height: 15rpx;
		background-color: white;
		margin-top: -20rpx;
		background-image: url('../../static/icon/Dividingline.png');
		background-repeat: no-repeat;
		background-size: cover;

	}

	.Dividing-line02 {
		margin-top: 20rpx;
	}

	.image {
		display: block;
		width: 100%;
		height: 100%;
		/* 图片按比例缩放，全部显示在容器内 */
		object-fit: contain;
	}

	/* 购买商品信息 */
	.shop {
		height: 80rpx;
		display: flex;
		align-items: center;
	}

	.shop-avatar {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
	}

	.shop-namer {
		display: block;
		margin-left: 20rpx;
	}

	.Product-information-background {
		height: 270rpx;
		display: flex;
		align-items: center;
	}

	.Product-images {
		width: 230rpx;
		height: 230rpx;
		margin-left: 20rpx;
	}

	.Product-information {
		width: 410rpx;
		height: 220rpx;
		margin-left: 30rpx;
	}

	.product-image {
		width: 100%;
		height: 100%;
		/* 图片按比例缩放，全部显示在容器内 */
		object-fit: contain;
	}

	.price-background {
		width: 420rpx;
		height: 60rpx;
		display: flex;

	}

	.price-txt {
		display: inline-block;
		margin-left: 20rpx;
		margin-top: 20rpx;
		color: #ff2442;
	}

	.Product-Background {
		display: flex;
	}

	.Other-Product-images {
		width: 130rpx;
		height: 130rpx;
	}

	.Alternative-box {
		width: 500rpx;
		display: flex;
	}

	.Alternative-box-background {
		width: 470rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
	}

	.choise-box-background {
		height: 200rpx;
		display: flex;
	}

	.price-background-02,
	.price-background-03 {
		height: 50rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* 禁止文本换行 */
		white-space: nowrap;
		/* 隐藏超出的内容 */
		overflow: hidden;
		/* 超出范围的文本以省略号显示 */
		text-overflow: ellipsis;
	}

	.price-background-03 {
		margin-right: 20rpx;
	}

	.product-number {
		height: 50rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.Delivery-information {
		height: 80rpx;
		display: flex;
		background-color: white;
		justify-content: space-between;
		align-items: center;
	}

	.Delivery-information-txt,
	.Delivery-information-txt-02 {
		display: block;
		height: 50rpx;
		font-size: 35rpx;
		margin-left: 20rpx;
		color: darkgray;
		margin-right: 20rpx;
	}

	.Delivery-information-txt-02 {
		color: black;
	}

	.Quantity-of-goods {
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-size: 40rpx;
	}

	/* 实际付款金额 */
	.Payment-amount {
		/* height: 300rpx; */
		background-color: white;
		margin-top: 30rpx;
	}

	.Product-amount {
		height: 100rpx;
		background-color: white;
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Balance-payment,
	.Order-remarks {
		height: 70rpx;
		background-color: white;
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
		align-items: center;
	}

	.Balance-payment text,
	.Order-remarks text {
		margin-left: 20rpx;
	}

	.remarks {
		width: 500rpx;
		height: 70rpx;
		white-space: nowrap;
		text-align: right;
		padding-right: 20rpx;
	}

	.total {
		width: 100%;
		height: 150rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
	}

	.Virtual-remarks {
		height: 150rpx;
		margin-top: 30rpx;
		background-color: white;
	}

	.total-amount {
		width: 480rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
	}

	.total-amount text {
		margin-left: 20rpx;
	}

	.total-maney {
		color: #ff2442;
		font-size: 31rpx;
	}

	.Pay-Now {
		width: 270rpx;
		height: 100rpx;
		background-color: #ff2442;
		border-radius: 50rpx;
		margin-right: 20rpx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 优惠券 */
	.coupon {
		width: 112rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ff2442;
	}

	.coupon-box {
		width: 30rpx;
		height: 30rpx;
		background-image: url("../../static/Myimg/right.png");
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 12rpx;
	}

	.Coupon-display {
		/* height: 900rpx; */
	}

	.Coupon-display-box {
		width: 95%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid gainsboro;
		margin: auto;
	}

	.Coupon-amount {
		width: 90%;
		margin: 30rpx auto;
		overflow: hidden;
		border: 1rpx solid gray;
	}

	.Diary-Coupons-txt {
		display: block;
		height: 55rpx;
		width: 240rpx;
		margin-left: -30rpx;
		padding-top: 10rpx;
		padding-left: 40rpx;
		background-color: gold;
		border-radius: 60rpx;
	}

	.Diary-Coupons-background {
		width: 100%;
		height: 190rpx;
		/* background-color: gold; */
		display: flex;
		align-items: center;
	}

	.Diary-Coupons-maney {
		width: 130rpx;
		height: 130rpx;
		/* background-color: #f0f0f0; */
		margin-left: 30rpx;
		color: #ff2442;

	}

	.Diary-Coupons-maney-txt,
	.Diary-Coupons-maney-txt-maney {
		display: block;
		text-align: center;
		margin-top: 30rpx;
		font-size: 50rpx;
	}

	.Diary-Coupons-maney-txt-maney {
		color: gray;
	}

	.Available-coupons {
		width: 450rpx;
		height: 130rpx;
		margin-left: 30rpx;
	}

	.Available-coupons-txt {
		display: block;
		text-align: center;
		font-size: 35rpx;
		margin-top: 30rpx;
		margin-left: -35rpx;
	}

	.Available-coupons-02 {
		height: 50rpx;
		display: flex;
		padding-top: 15rpx;
		justify-content: space-between;
		margin-top: 5rpx;
	}

	.Available-coupons-txt-02 {
		display: block;
		font-size: 25rpx;
		color: grey;
		margin-top: 10rpx;
		margin-right: -30rpx;
	}

	.Diary-Coupons--txt-background {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.not-used {
		display: block;
		margin-right: 20rpx;
		color: #ff2442;
	}

	.already-use {
		color: gray;
	}

	.close-box {
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
		background-image: url("../../static/icon/close.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Product-amount-maney {
		margin-right: 40rpx;
	}

	/* 是否确认付款 */
	.determine-pay {
		width: 600rpx;
		height: 400rpx;

	}

	.determine-pay-background {
		width: 100%;
		height: 240rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Whether-pay {
		width: 100%;
		height: 140rpx;
		/* 		background-color: #f0f0f0; */
		display: flex;
	}

	.cancel,
	.confirm {
		width: 300rpx;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid gainsboro;
	}

	/* .confirm{
		background-color:#55ff7f ;
	} */
	.cancelPopup-background {
		height: 800rpx;
		background-color: #f0f0f0;
	}

	.timing {
		height: 150rpx;
		background-color: white;
		display: flex;
	}

	.Payment-countdown {
		width: 500rpx;
		height: 80rpx;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ff2442;
		/* 你也可以调整字体颜色 */
	}

	.time {
		width: 500rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
	}

	.time-custom-item {
		font-size: 50rpx;
	}

	.time-doc {
		font-size: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.time-custom-txt {
		font-size: 50rpx;
		color: black;
		margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.pay-background-time {
		width: 90%;
		height: 200rpx;
		margin: auto;
	}

	.Continue-settlement {
		width: 100%;
		height: 150rpx;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Continue-settlement-txt {
		width: 90%;
		height: 120rpx;
		background-color: #ff2442;
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		color: white;
	}

	.Continue-settlement-txt02 {
		margin-left: 20rpx;
	}

	.return-timing {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		background-image: url("../../static/icon/close.png");
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>